<template>
    <div class="custom-tree-container">
    <el-tree
            :data="dataSource"
            v-loading="loading"
            node-key="catId"
            :props = defaultProps
            @node-click = nodeClick
            accordion
            :expand-on-click-node="false"
    >
        <template #default="{ node, data }">
        <span class="custom-tree-node" >
          <span>{{ node.label }}</span>
        </span>
        </template>
    </el-tree>
    </div>
</template>

<script setup>
    import {ref, reactive, onMounted} from 'vue'
    import request from '@/utils/request.js'
    let id = 1000
    let modCategory = ref()
    let loading = ref(true)
    let dataSource = reactive([])
    let emits = defineEmits(["queryData"])
    const defaultProps = {
        children: 'children',
        label: 'name',
        id:"catId"
    }
    let edit = reactive({type:"add", id:0, node:null})
    onMounted(() => {
        load()
    })

    function load() {
        request.get(`/api/category/list/tree`).then(resp => {
            dataSource.splice(0, dataSource.length)
            dataSource.push(...resp)
            loading.value = false
        })
    }

    function nodeClick(node) {

        if(node.catLevel == 3){
            emits("queryData", node.catId)
        }
    }
</script>

<style lang="css" scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
